<template>
  <div class="container">
    <navbar title="辣小客部落" theme="light" :leftShow="false"></navbar>
    <wxc-tab-page ref="wxc-tab-page"
                  :tab-titles="tabTitles"
                  :tab-styles="tabStyles"
                  :tab-page-height="tabPageHeight"
                  @wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
      <div class="tab-panel">
        <userItemSelectionList :height="tabPageHeight - 160"></userItemSelectionList>
      </div>
      <div class="tab-panel">
        <articleList :height="tabPageHeight - 160"></articleList>
      </div>
    </wxc-tab-page>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }
  .tab-panel {
    width: 750px;
    @include border-top(1, solid, #ddd)
  }
</style>
<script>
import { WxcTabPage, WxcPanItem, Utils } from 'weex-ui'
let theme = require('./include/theme')
let Deferred = require('Deferred')

require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh'),
    require('./mixin/page-loading-more'),
    require('./mixin/page-scrolltop')
  ],
  components: {
    WxcTabPage,
    WxcPanItem,
    navbar: require('./components/navbar.vue'),
    userItemSelectionList: require('./components/user-item-selection-list.vue'),
    articleList: require('./components/article-list.vue')
  },
  data () {
    return {
      tabTitles: [
        {
          title: '每日爆款'
        },
        {
          title: '推广素材'
        }
      ],
      tabStyles: {
        bgColor: '#FFFFFF',
        titleColor: '#666666',
        activeTitleColor: theme.color.primary,
        activeBgColor: '#FFFFFF',
        width: 375,
        height: 80,
        fontSize: 30,
        hasActiveBottom: true,
        activeBottomColor: theme.color.primary,
        activeBottomHeight: 2,
        activeBottomWidth: 150,
        textPaddingLeft: 10,
        textPaddingRight: 10,
        textPaddingBottom: 10
      },
      tabPageHeight: 1334
    }
  },
  created () {
    this.tabPageHeight = Utils.env.getPageHeight()
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {

    }

  }
}
</script>
